<template>
    <el-menu router :default-openeds="opened" class="left-menu h-100" :collapse="menuFolded" :collapse-transition="false"
        :default-active="active" unique-opened>
        <div class="p-4 font-bold title text-center">
            <i class="iconfont icon-liushuixian-liushuixianx" />
            <span class="ml-2" v-if="!menuFolded">流石IOT</span>
        </div>
        <el-sub-menu v-for="menu in menus" :key="menu.id" :index="menu.path">
            <template #title>
                <el-icon>
                    <component :is="menu.icon" />
                </el-icon>
                <template v-if="!menuFolded">{{ menu.name }}</template>
            </template>
            <el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path">
                {{ child.name }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useSysStore } from '../store';
import { useRouter } from 'vue-router'

const menuFolded = computed(() => {
    return useSysStore().getMenuFolded()
})
const opened = computed(() => {
    if (!menus.value || !menus.value.length) {
        return []
    }

    return [menus.value[0].path]
})
const router = useRouter()

const active = computed(() => {
    return router.currentRoute.value.fullPath
})

const menus = computed(() => {
    return useSysStore().getMenuTree()
})
</script>

<style lang="scss" scoped>
.left-menu {
    --el-menu-bg-color: #343e5e;
    --el-menu-text-color: #bfcbd9;
    --el-menu-active-color: #409eff;
    --el-menu-hover-bg-color: #242e4e;

    border-right: none;
    box-shadow: 0 0 5px #343e5e;
    z-index: 30;

    :deep() {
        .el-menu--inline {
            background-color: #242e4eaa;
        }
    }
}

.left-menu:not(.el-menu--collapse) {
    width: 240px;

}

.title {
    color: #efefef;
}
</style>